<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Comm.js DOC</title>
<link type="text/css" rel="stylesheet" href="http://misc.tg.com.cn/ui/css/core.css">
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script src="http://misc.tg.com.cn/ui/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://misc.tg.com.cn/ui/js/comm.js"></script>
</head>

<body>
<h1>COMM.JS说明文档</h1>
<h2>tabSwitcher</h2>
<p>功能：标签切换，可以定义触发方式，切换时间，自动播放，切换效果。</p>
<table cellpadding="1" cellspacing="1" frame="below">
	<tr>
		<td style="width:10%">参数</td>
		<td style=" width:10%">默认值</td>
		<td>功能</td>
	</tr>
	<tr>
		<td>startIndex: </td>
		<td>0</td>
		<td>起始位置</td>
	</tr>
	<tr>
		<td>activeCls</td>
		<td>'cur'</td>
		<td>选中状态的标签class</td>
	</tr>
	<tr>
		<td>tabCls</td>
		<td>'.tab'</td>
		<td>标签的class名</td>
	</tr>
	<tr>
		<td>itemCls</td>
		<td>'.tab-item'</td>
		<td>标签页的class名</td>
	</tr>
	<tr>
		<td>delay</td>
		<td>0</td>
		<td>标签页切换的时间</td>
	</tr>
	<tr>
		<td>duration</td>
		<td>5000</td>
		<td>自动切换的时间间隔</td>
	</tr>
	<tr>
		<td>autoPlay:</td>
		<td>false</td>
		<td>是否自动切换 true or false</td>
	</tr>
	<tr>
		<td>trigger</td>
		<td>"click"</td>
		<td>触发方式 建议 click、 over</td>
	</tr>
	<tr>
		<td>omitLinks</td>
		<td>false</td>
		<td>暂无</td>
	</tr>
	<tr>
		<td>effect</td>
		<td>false</td>
		<td>暂时只有slide</td>
	</tr>
</table>
<style type="text/css">
	.tab{  background-color: #FFFFFF;border-right: 1px solid #CCCCCC;float: left;text-align: center;width: 60px;}
	.cur{ background-color:#000; color:#fff;}
</style>
<div class="indexExample">
	<ul>
		<li><a href="#tab-example-1">最简单的tab</a></li>
		<li><a href="#tab-example-2">自动切换的tab</a></li>
		<li><a href="#tab-example-3">鼠标移上切换的tab</a></li>
		<li><a href="#tab-example-4">有切换效果的tab</a></li>
  </ul>
</div>
<h2><a name="tab-example-1">例子——最简单的tab</a></h2>
<div id="tabswitch-example1">
	<ul>
		<li class="tab">1</li>
		<li class="tab">2</li>
		<li class="tab">3</li>
	</ul>
    <ul>
    	<li class="tab-item"><img src="images/s1.jpg" /></li>
    	<li class="tab-item"><img src="images/s2.jpg" /></li>
    	<li class="tab-item"><img src="images/s3.jpg" /></li>
    </ul>
</div>
<script type="text/javascript">
	$("#tabswitch-example1").tabSwitcher();
</script>
<h2>说明</h2>
<ul class="tur">
	<li>首先建立一个div#tabswitch-example1作为总的容器。</li>
	<li>然后在div#tabswitch-example下建立一个ul，li的class设为。</strong></li>
	<li>接着在建立ul，li的class设为tab-item。</strong></li>
    <li>设定一下.table的样式，以及选中状态的.cur样式。</li>
    <li>最后将tabSwitcher绑定在#tabswitch-example1上即可。</li>
</ul>
<h2>代码</h2>

<div class="cssExample">
  .tab{  background-color: #FFFFFF;border-right: 1px solid #CCCCCC;float: left;text-align: center;width: 60px;}<br />
.cur{ background-color:#000; color:#fff;}</div>
<div class="htmlExample">&lt;div id=&quot;tabswitch-example1&quot;&gt;<br />
&lt;ul&gt;<br />
&lt;li class=&quot;tab&quot;&gt;1&lt;/li&gt;<br />
&lt;li class=&quot;tab&quot;&gt;2&lt;/li&gt;<br />
&lt;li class=&quot;tab&quot;&gt;3&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;ul&gt;<br />
&lt;li class=&quot;tab-item&quot;&gt;&lt;img src=&quot;images/s1.jpg&quot; /&gt;&lt;/li&gt;<br />
&lt;li class=&quot;tab-item&quot;&gt;&lt;img src=&quot;images/s2.jpg&quot; /&gt;&lt;/li&gt;<br />
&lt;li class=&quot;tab-item&quot;&gt;&lt;img src=&quot;images/s3.jpg&quot; /&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;</div>
<div class="scriptExample">&lt;script type=&quot;text/javascript&quot;&gt;<br />
$(&quot;#tabswitch-example1&quot;).tabSwitcher();<br />
&lt;/script&gt;</div>
<p><a class="back" href="#">返回</a></p>
<h2><a name="tab-example-2">例子——自动切换的tab</a></h2>
<div id="tabswitch-example2">
	<ul>
		<li class="tab">1</li>
		<li class="tab">2</li>
		<li class="tab">3</li>
	</ul>
    <ul>
    	<li class="tab-item"><img src="images/s1.jpg" /></li>
    	<li class="tab-item"><img src="images/s2.jpg" /></li>
    	<li class="tab-item"><img src="images/s3.jpg" /></li>
    </ul>
</div>
<script type="text/javascript">
	$("#tabswitch-example2").tabSwitcher({autoPlay:true});
</script>
<h2>说明</h2>
<p>所有代码如前，只需在参数中设autoPlay为true即可。</p>
<div class="scriptExample">&lt;script type=&quot;text/javascript&quot;&gt;<br />
$(&quot;#tabswitch-example2&quot;).tabSwitcher({autoplay:true});<br />
&lt;/script&gt;</div>
<p><a class="back" href="#">返回</a></p>
<h2><a name="tab-example-3">例子——鼠标移上切换的tab</a></h2>
<div id="tabswitch-example3">
	<ul>
		<li class="tab">1</li>
		<li class="tab">2</li>
		<li class="tab">3</li>
	</ul>
    <ul>
    	<li class="tab-item"><img src="images/s1.jpg" /></li>
    	<li class="tab-item"><img src="images/s2.jpg" /></li>
    	<li class="tab-item"><img src="images/s3.jpg" /></li>
    </ul>
</div>
<script type="text/javascript">
	$("#tabswitch-example3").tabSwitcher({trigger:'hover'});
</script>
<h2>说明</h2>
<p>所有代码如前，只需在参数中设trigger为'hover'即可。</p>
<div class="scriptExample">&lt;script type=&quot;text/javascript&quot;&gt;<br />
$(&quot;#tabswitch-example3&quot;).tabSwitcher({trigger:'hover'});<br />
&lt;/script&gt;</div>
<p><a class="back" href="#">返回</a></p>
<h2><a name="tab-example-4">例子——有切换效果的tab</a></h2>
<div id="tabswitch-example4">
	<ul>
		<li class="tab">1</li>
		<li class="tab">2</li>
		<li class="tab">3</li>
	</ul>
    <ul>
    	<li class="tab-item"><img src="images/s1.jpg" /></li>
    	<li class="tab-item"><img src="images/s2.jpg" /></li>
    	<li class="tab-item"><img src="images/s3.jpg" /></li>
    </ul>
</div>
<script type="text/javascript">
	$("#tabswitch-example4").tabSwitcher({effect:'slide'});
</script>
<h2>说明</h2>
<p>所有代码如前，只需在参数中设effect为slide'即可。</p>
<div class="scriptExample">&lt;script type=&quot;text/javascript&quot;&gt;<br />
$(&quot;#tabswitch-example4&quot;).tabSwitcher({effect:'slide'});<br />
&lt;/script&gt;</div>
<p><a class="back" href="#">返回</a></p>
</body>
</html>
